<template>
  <div class='sub-category'>
    <div class="container">
      <!-- 面包屑 -->
      <SubBread />
      <!-- 筛选区 -->
      <SubFilter />
      <!-- 结果区域 -->
      <div class="goods-list">
        <!-- 排序 -->
        <SubSort></SubSort>
        <!-- 列表 -->
        <SubList/>
      </div>
    </div>
  </div>
</template>

<script>
import SubBread from './components/sub-bread'
import SubFilter from './components/sub-filter'
import SubSort from './components/sub-sort'
import SubList from './components/sub-list'
import { provide, reactive } from 'vue'
export default {
  name: 'SubCategory',
  components: {
    SubBread,
    SubFilter,
    SubSort,
    SubList
  },
  setup () {
    // 根组件提供查询数据及操作数据的方法
    const filterData = reactive({
      attrs: [], // 一般商品属性
      sortField: null, // 排序
      brandId: null // 品牌ID
    })
    // 修改品牌ID的方法
    function setBrandId (id) {
      filterData.brandId = id
    }
    // 修改排序的方法
    function setSortField (newSortField) {
      filterData.sortField = newSortField
    }
    // 修改一般商品属性的方法
    function setAttrs (attr) {
      // 筛选出符合条件的索引
      const index = filterData.attrs.findIndex(attrItem => attrItem.groupId === attr.groupId)
      // 筛选如果重复 把重复的删除
      if (index > -1) filterData.attrs.splice(index, 1)
      // 否则就添加进attrs
      filterData.attrs.push(attr)
    }
    // 传出操作数据的方法
    provide('setData', {
      setBrandId,
      setSortField,
      setAttrs
    })
    // 传出修改后的数据
    provide('filterData', filterData)
  }
}
</script>
